<template>
    <div>
        <el-form ref="ExistingMaterial_ref">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-form-item prop="DeviceName">
                        <el-input size="mini" v-model="Device.DeviceName" placeholder="物品名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item prop="DeviceModel">
                        <el-input size="mini" v-model="Device.DeviceModel" placeholder="规格型号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item prop="DeviceNumber">
                        <el-input size="mini" v-model="Device.DeviceNumber" placeholder="物品编号"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="3">
                    <el-form-item prop="DepartmentId">
                        <el-select size="mini" v-model="Device.DepartmentId" filterable placeholder="部门">
                            <el-option :value="0" label="请选择部门"></el-option>
                            <el-option v-for="v in AllDepartment" :value="v.Id" :label="v.DepartmentName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item prop="DeviceCategoryIdOne">
                        <el-select size="mini" v-model="Device.DeviceCategoryIdOne" placeholder="一级分类">
                            <el-option :value="0" label="一级分类"></el-option>
                            <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId == 0" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item prop="DeviceCategoryIdTwo">
                        <el-select size="mini" v-model="Device.DeviceCategoryIdTwo" placeholder="二级分类">
                            <el-option :value="0" label="二级分类"></el-option>
                            <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId != 0" :value="item.Id" :label="item.DeviceCategoryName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item prop="State">
                        <el-select size="mini" v-model="Device.State" placeholder="物品状态">
                            <el-option :value="0" label="物品状态"></el-option>
                            <el-option v-for="v in AllDeviceState" :value="v.Type" :label="v.Name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" size="mini" @click="formdata"></el-button>
                        <el-button type="success" size="mini" @click="ExistingMaterial_event">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row :gutter="5" style="margin-top: 10px">
            <el-col :span="6">
                <el-input size="mini" v-model="applyPurchaseNumber" placeholder="请输入入库单号，多个编号利用英文逗号分隔"></el-input>
            </el-col>
            <el-col :span="6">
                <el-input size="mini" v-model="outboundNumber" placeholder="请输入出库单号，多个编号利用英文逗号分隔"></el-input>
            </el-col>
            <el-col :span="3">
                <el-button size="mini" type="success" @click="SureNumber_event">确定</el-button>
            </el-col>
        </el-row>

        <el-row style="margin-top: 10px">
            <el-col :span="24">
                <el-table :data="tableData" ref="multipleTable" border stripe style="width: 100%" @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="DeviceName" label="名称" align="center" show-overflow-tooltip width="120"></el-table-column>
                    <el-table-column prop="imgUrl" label="图片" align="center" show-overflow-tooltip>
                        <template slot-scope="slot">
                            <el-avatar v-for="img in slot.row.imgUrl" :src="img"></el-avatar>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DeviceNumber" align="center" show-overflow-tooltip label="编号" width="120"></el-table-column>
                    <el-table-column prop="StockAmount" align="center" show-overflow-tooltip label="库存数量"></el-table-column>
                    <el-table-column prop="DeviceModel" align="center" show-overflow-tooltip label="规格型号" width="120"></el-table-column>
                    <el-table-column prop="Price" align="center" show-overflow-tooltip label="单价" width="120"></el-table-column>
                    <el-table-column prop="Unit" align="center" show-overflow-tooltip label="单位"></el-table-column>
                    <el-table-column prop="Amount" align="center" show-overflow-tooltip label="最大数量" width="100"></el-table-column>
                    <el-table-column prop="TotalPrice" align="center" show-overflow-tooltip label="最高总价" width="100"></el-table-column>
                    <el-table-column prop="StockPrice" align="center" show-overflow-tooltip label="库存金额" width="100"></el-table-column>
                    <el-table-column prop="ConsumeAmount" align="center" show-overflow-tooltip label="消耗数量"></el-table-column>
                    <el-table-column prop="ConsumePrice" align="center" show-overflow-tooltip label="消耗金额" width="100"></el-table-column>
                    <el-table-column prop="DamageAmount" align="center" show-overflow-tooltip label="损坏数量"></el-table-column>
                    <el-table-column prop="DamagePrice" align="center" show-overflow-tooltip label="损坏金额" width="100"></el-table-column>
                    <el-table-column prop="DeviceCategoryIdOne" label="第一类别" align="center" show-overflow-tooltip width="100">
                        <template slot-scope="slot">
                            {{ DeviceCategoryId_conversion(slot.row.DeviceCategoryIdOne) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="DeviceCategoryIdTwo" label="第二类别" align="center" show-overflow-tooltip width="100">
                        <template slot-scope="slot">
                            {{ DeviceCategoryId_conversion(slot.row.DeviceCategoryIdTwo) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" prop="State" label="状态" align="center" show-overflow-tooltip width="50">
                        <template slot-scope="slot">
                            {{ State_conversion(slot.row.State) }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination @size-change="formdata"
                                   @current-change="formdata"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "AddExistingMaterial",
        props: {
            AllDeviceCategory: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllDeviceState: {
                type: Array,
                required: true
            },
            Selection_Material: {
                type: Array,
                required: true
            },
            IsClearId:{
                type:Boolean,
                default:true
            }
        },
        data() {
            return {
                //表格查询数据
                Device: {
                    DeviceName: '', //物品名称
                    DeviceNumber: '', //物品编号
                    DepartmentId: 0, //领用部门ID
                    DeviceCategoryIdOne: 0, //一级分类
                    DeviceCategoryIdTwo: 0, //二级分类
                    State: 0, //物品状态
                    DeviceModel: '', //物品规格型号
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },

                //出库单单号
                outboundNumber: '',
                //申购单单号
                applyPurchaseNumber: '',
                //表格选中数据
                selection_Data: [],
            }
        },
        //watch:{
        //Selection_Material:function(rows){
        //this.$refs.multipleTable.clearSelection();
        //if (rows){
        //    rows.forEach(row => {
        //        this.$refs.multipleTable.toggleRowSelection(row);
        //    });
        //}
        //}
        //},
        created() {
            this.formdata()
        },
        methods: {
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //物资分类转化
            DeviceCategoryId_conversion(val) {
                for (let i = 0; i < this.AllDeviceCategory.length; i++) {
                    if ((this.AllDeviceCategory)[i].Id == val) {
                        return (this.AllDeviceCategory)[i].DeviceCategoryName
                    }
                }
            },
            //物资状态转化
            State_conversion(val) {
                let msg = ""
                switch (val) {
                    case 1:
                        msg = "正常"
                        break;
                    case 2:
                        msg = "损坏"
                        break;
                    case 4:
                        msg = "报废"
                        break;
                    case 8:
                        msg = "维修"
                        break;
                }
                return msg
            },
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Device/GetDeviceDetail', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    Device: this.Device,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                    //console.log(this.tableData)
                }).catch(() => {
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //申购单和出库单物资单号查询
            SureNumber_event() {
                if (this.applyPurchaseNumber =="" &&  this.outboundNumber == ""){
                    this.$message.warning('请输入正确的申购单号或者出库单号')
                    return
                }
                this.$http.get('Device/GetDeviceByApplypurchaseNumber?applyPurchaseNumber='
                    + this.applyPurchaseNumber + '&outboundNumber=' + this.outboundNumber).then(res => {
                        if (res.data.length > 0) {
                            let jsond = JSON.parse(JSON.stringify(res.data))
                            jsond.forEach(v=>{
                                //v.DeviceId = v.Id;
                                //v.Id = 0;//重置为0，父页面用来判断是否是新增物资
                                v.Amount = 0;//重置为0
                                v.ActualPrice = 0
                                this.$parent.$parent.tableData.push(v)
                            })
                            this.$parent.$parent.AddExistingMaterial_dialog = false
                            this.applyPurchaseNumber =""
                            this.outboundNumber = ""
                        } else {
                            this.$message.warning('该申购单下无可出库物资，请检查输入的申购单号是否正确')
                        }
                    })
            },
            //表格选中项目
            SelectionChange_event(val) {
                this.selection_Data = val
            },
            //现有物资表格确认事件
            ExistingMaterial_event() {
                if (this.$parent.$parent.tableData.length == 0) {
                    this.selection_Data.forEach(item => {
                        let jsond = JSON.parse(JSON.stringify(item))
                        if(this.IsClearId){
                            jsond.DeviceId = jsond.Id;
                            jsond.Id = 0;//重置为0，父页面用来判断是否是新增物资
                            jsond.ActualPrice = 0
                        }
                        jsond.Amount = 0;//重置为0
                        this.$parent.$parent.tableData.push(jsond)
                    })
                } else {
                    for (let i = 0; i < this.selection_Data.length; i++) {
                        let samething = false
                        for (let j = 0; j < this.$parent.$parent.tableData.length; j++) {
                            if (this.selection_Data[i].Id == this.$parent.$parent.tableData[j].DeviceId) {
                                samething = true
                                break;
                            }
                        }
                        if (!samething) {
                            //let jsond=JSON.parse(this.selection_Data[i])
                            let jsond = this.selection_Data[i]
                            if(this.IsClearId){
                                jsond.DeviceId = jsond.Id;
                                jsond.Id = 0;//重置为0，父页面用来判断是否是新增物资
                            }
                            jsond.Amount = 0;//重置为0
                            this.$parent.$parent.tableData.push(jsond)
                        }
                    }
                }
                this.selection_Data = []
                this.$parent.$parent.AddExistingMaterial_dialog = false
                this.$refs.multipleTable.clearSelection();
                this.$refs["ExistingMaterial_ref"].resetFields()
            },
        }
    }
</script>

<style scoped>
    .block {
        float: right;
    }

    .el-form-item {
        margin-bottom: 0px;
    }

    .el-form-item__content {
        line-height: 0px !important;
    }
</style>
